<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>java在线</title>
    <link rel="shortcut icon" th:href="@{/images/a/logo.ico}"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!--  <%&#45;&#45;//live2d板娘&#45;&#45;%>-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
    <script src="https://fastly.jsdelivr.net/gh/lrplrplrp/bkyl2d@main/loads.js"></script>
    <style>
        #editor {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand ms-5" href="#">java在线</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav col-10">
                <li class="nav-item ">
                    <a class="nav-link active" aria-current="page" href="/blog/intoMain">返回首页</a>
                </li>
            </ul>
            <form class="d-flex me-5 col-2" role="search">
<!--                <span style="font-size: 20px; font-family:'微软雅黑" class="me-2" th:text="${username}"></span>-->
<!--                <img th:src="|@{/images/}${session.pic}|" alt="Logo" width="50" height="50" style="border-radius: 50px"-->
<!--                     class="d-inline-block align-text-top">-->
<!--                <span style="font-size: 15px;"></span>-->
                <img th:if="${session.pic}!=null" th:src="|@{/images/}${session.pic}|" alt="未登录" width="50" height="50"
                     style="border-radius: 50px;" class="d-inline-block align-text-top">
                <a th:if="${session.pic==null}" th:href="@{/blog/intoLogin}">去登录</a>
                <span th:if="${session.pic}!=null" style="font-size: 15px;" th:text="${username}"></span>
            </form>
        </div>
    </div>
</nav>
<div style="height: 30px"></div>
<div class="container shadow p-3 mb-5 bg-white rounded" style="height: 750px;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-2">
                <button id="sub-btn" class="btn btn-success " onclick="submit()" style="font-weight: bolder;">
                    点击运行！
                </button>
            </div>
            <div class="col-3">
                <select onchange="selectLanguage(this)" id="language-type" class="form-control">
                    <option selected>Java</option>
                    <option>暂未开放</option>
                </select>
            </div>
            <div class="col-3">
                <button type="button" class="btn btn-secondary" onclick="clean()">清空</button>
            </div>
            <div class="col-2" style="color: green;">
                编译时间:<span id="compile" style="color: #a5113c; font-weight: bolder"></span>
            </div>
            <div class="col-2" style="color: green;">
                运行时间:<span id="run" style="color: #a5113c; font-weight: bolder"></span>
            </div>
        </div>
    </div>
    <div style="height: 20px"></div>

    <div class="row">
        <div class="col-7 border border-light" style="height: 600px;">
            <div id="editor"></div>
        </div>
        <div class="col-1 border-left"></div>
        <div class="col text-center" id="key">
            <div class="bg-success mb-4"
                 style="height:40px;color: whitesmoke;font-size: 15px;font-weight: bold;text-align: center;
                  line-height:40px;font-family: '微软雅黑';">
                运行结果显示
            </div>
            <textarea id="output" class="form-control" rows="15"></textarea>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.8/ace.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.8/ext-language_tools.min.js"
        type="text/javascript"></script>
<script>
    ace.require("ace/ext/language_tools");
    const editor = ace.edit("editor");
    editor.session.setMode("ace/mode/java");
    editor.setTheme("ace/theme/github");
    // enable autocompletion and snippets
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
    });
    editor.setValue("public class HelloWorld {\n" +
        "    public static void main(String[] args) {\n" +
        "        System.out.println(\"hello, world\");\n" +
        "    }\n" +
        "}", -1);

    function submit() {
        document.querySelector("#output").value = "代码运行中！";
        let data = editor.getValue();

        fetch("/blog/compile", {
            method: "POST",
            headers: {
                "Content-Type": "application/json; charset=UTF-8"
            },
            body: JSON.stringify({
                code: data,
                type: document.querySelector("#language-type").value.toUpperCase()
            })

        }).then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json(); // 将 JSON 字符串解析为 JavaScript 对象
        })
            .then(result => {
                // 这里的 result 是一个普通的 JavaScript 对象，不是 Result 类的实例
                console.log(result.data);
                // let data = JSON.parse(response.data)
                document.querySelector("#output").value = result.data;
                let run = document.getElementById('run');
                let compile = document.getElementById('compile');
                run.textContent = result.runTime + 's';
                compile.textContent = result.compileTime + 's';

                document.querySelector("#compile").value = result.compileTime;
            })
            .catch(error => {
                console.error('There was a problem with the fetch operation:', error);
            });
    }

    function clean() {
        editor.setValue("");
    }

    function selectLanguage(e) {
        let mode = "ace/mode/" + e.value.toLowerCase();
        if (e.value.toLowerCase() === "c" || e.value.toLowerCase() === "cpp") {
            mode = "ace/mode/c_cpp"
        }
        editor.session.setMode(mode);
    }
</script>
</body>
</html>